<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>10.1.JS预解析-变量提升和函数提升</title>
    <script>
        // 1问
        // console.log(num); // 报错
        console.log('------------------------');

        // 2问
        console.log(num);  // undefined 坑1
        var num = 10;
        //分析：相当于执行了以下代码
        // var num;
        // console.log(num); // 所以输出 undefined
        // num = 10;
        console.log('------------------------');

        // 3问
        fn(); // 在上面调用成功 11
        function fn() {
            console.log(11);
        }
        // fn();  // 在下面也调用成功 11
        // 分析：因为是关键字函数声明，所有根据函数提升把整个函数提升到了全局作用局最前面，所以依然可以调用
        console.log('------------------------');

        // 4问
        fun(); // 在上面报错  坑2
        var fun = function () {
            console.log(22);
        }
        // fun();  //  在下面可以调用成功 22
        // 函数表达式 调用必须写在函数表达式的下面
        // 分析：相当于执行了以下代码
        // var fun;
        // fun();  // 所以报错
        // fun = function () {
        //     console.log(22);
        // }
        console.log('------------------------');

        // 1.js引擎运行js 分两步： 预解析 代码执行
        // （1）预解析：js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
        // （2）代码执行：按照代码书写顺序从上往下执行

        // 2.预解析分为 变量预解析（变量提升）和函数预解析（函数提升）
        // （1）变量提升：就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作
        // （2）函数提升：就是把所有函数声明提升到当前作用域最前面 不调用函数
    </script>
</head>

<body>

</body>

</html>